<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <div>
                        <div class="text-center">
                            <!-- <userAvatar /> -->
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                登录名
                                <div class="pull-right">{{ user.username }}</div>
                            </li>
                            <li class="list-group-item">
                                真实姓名
                                <div class="pull-right">{{ user.realname }}</div>
                            </li>
                            <li class="list-group-item">
                                性别
                                <div class="pull-right">{{ user.sex == '1' ? '男' : '女' }}</div>
                            </li>
                            <li class="list-group-item">
                                手机号码
                                <div class="pull-right">{{ user.phonenumber }}</div>
                            </li>
                            <li class="list-group-item">
                                用户邮箱
                                <div class="pull-right">{{ user.email }}</div>
                            </li>
                            <!-- <li class="list-group-item">
                                角色
                                <div class="pull-right">{{ user.tole_tag }}</div>
                            </li> -->
                            <li class="list-group-item">
                                住址
                                <div class="pull-right">{{ user.address }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18" :xs="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>基本资料</span>
                    </div>
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="基本资料" name="userinfo">
                            <userInfo :user="user" />
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="resetPwd">
                            <resetPwd :user="user" />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import {AjaxCommon} from '@/libs/apiCommon'
export default {
    name: 'Profile',
    components: {userInfo, resetPwd},
    data() {
        return {
            user: {},
            roleGroup: {},
            postGroup: {},
            activeTab: 'userinfo'
        }
    },
    created() {
        this.getUser()
    },
    methods: {
        getUser() {
            let user = JSON.parse(localStorage.getItem('userInfo'))
            const self = this
            AjaxCommon('/api/User/GetUserInfoByUserId', 'get', null).then((res) => {
                const data = res.data.Message
                user.id_card = data.id_card
                user.user_guid = data.user_guid
                self.user = user
            })
        }
    }
}
</script>
<style scoped lang="scss">
.list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.list-group {
    padding-left: 0px;
    list-style: none;
}

.list-group-item {
    background-color: inherit;
    border: 1px solid #e7eaec;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
    position: relative;
}
.pull-right {
    float: right;
}
</style>
